<template>
  <div style="min-width: 1200px">
    <div class="payBox">
      <div class="paytop">
        <div class="topIcon">
          <sicon size="30" type="3.1已关注店铺" color="#6aaf06" />
        </div>
        <div class="topInfo">
          <p class="topTitle">订单提交成功，请您及时付款，以便尽快为您发货~~</p>
          <p>
            请您在提交订单
            <span class="times">{{ Time }}</span>
            之内完成支付，超时订单会自动取消。
            <span class="times">订单号：{{ route.query.orderId }}</span>
          </p>
        </div>
        <div class="topPrice">
          <span>应付金额：</span><span class="priceNum">￥{{ route.query.price }}</span>
        </div>
      </div>
      <div class="payInfo">
        <h4 class="paydes">重要说明</h4>
        <ol class="payUl">
          <li>1、SkyCat商城支付平台目前支持微信支付方式。</li>
          <li>2、其它支付渠道正在调试中，敬请期待。</li>
        </ol>
      </div>
      <div class="center">
        <h4>支付平台</h4>
        <div style="display: flex;">
          <div class="payType">
            <sicon
              size="40"
              class="zhifubao"
              style="background-color: #00c800"
              type="微信"
              color="#fff"
            />
            <div class="zhifubaowenzi">
              <span class="text1">微信支付</span>
              <span class="text2" style="letter-spacing: 1px">WeChatPay</span>
            </div>
          </div>
          <div class="payType">
            <sicon size="40" class="zhifubao" type="支付宝" color="#fff" />
            <div class="zhifubaowenzi">
              <span class="text1">支付宝</span>
              <span class="text2">ALIPAY</span>
            </div>
          </div>
        </div>
      </div>
      <div class="paybox">
        <button class="paybtn" @click="pay">立即支付</button>
      </div>
    </div>
    <Dialog
      :title="payModeltitle"
      :visible="payModel"
      :width="payModelWidth"
      @isShow="isShow"
    >
      <template #default>
        <div>
          <p>支付金额：<span class="times">¥{{ route.query.price }}元</span></p>
          <div class="payModelBox">
            <img class="payImgs" :src="payImg" alt="图片加载中" />
          </div>
        </div>
      </template>
      <template #footer>
        <div>
          <button class="payBtnOut" @click="isShow">支付异常</button>
          <button class="payBtnOver" @click="toRoot">取消支付</button>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">
export default {
  name: "SPay",
};
</script>

<script lang="ts" setup>
import { ref, onBeforeUnmount, onMounted } from "vue";
import QRCode from "qrcode";
import { useRoute, useRouter } from "vue-router";
import { reqGetPayQRcode, reqGetPayStatus } from "@/api/pay";
import sicon from "@/components/sicon/sicon.vue";
import Dialog from "@/components/Dialog/index.vue";
// 添加地址
// 模态框
const payModel = ref<boolean>(false);
const payModelWidth = ref<string>("20%");
const payModeltitle = ref<string>("微信支付");
const timerId = ref(-1); // 支付轮询定时器

const isShow = () => {
  payModel.value = !payModel.value;
  !payModel.value && clearInterval(timerId.value);
};
const router = useRouter();
// 生成 route 对象
const route = useRoute();
// 获取路由 query 参数
// console.log(route.query);
// 支付完成
const toHome = () => {
  payModel.value = !payModel.value;
  router.push({
    name: "Paysuccess",
  });
};
const toRoot= () => {
  payModel.value = !payModel.value;
  router.push({
    name: "Home",
  });
};
// 支付二维码
const payImg = ref<string>("");

const pay = async () => {
  isShow();
  // 支付需要的oderId
  const orderId = route.query.orderId;
  // console.log(orderId);
  // 获取支付地址
  const code = await reqGetPayQRcode(orderId);
  // 将支付地址转为二维码
  payImg.value = await QRCode.toDataURL(code.codeUrl);
  // 在发起新的轮询之前删除之前的轮询
  clearInterval(timerId.value);
  // 轮询支付状态
  timerId.value = setInterval(async () => {
    await reqGetPayStatus(orderId);
    // 如果上面的返回值是支付成功，跳转下个页面
    toHome();
  }, 2000);
};
onBeforeUnmount(() => {
  // 页面卸载前清除轮询
  clearInterval(timerId.value);
});
const Time = ref("");
let times = ref(-1);
let nowtime = new Date() //获取当前时间
let endtime = nowtime.getTime() + 3600000 * 4;
onMounted(() => {
  const showtime = function () {
    let nowtime2 = new Date(); //获取当前时间
    let lefttime = endtime - nowtime2.getTime(); //距离结束时间的毫秒数
    let lefth = Math.floor((lefttime / (1000 * 60 * 60)) % 24); //计算小时数
    let leftm = Math.floor((lefttime / (1000 * 60)) % 60); //计算分钟数
    let lefts = Math.floor((lefttime / 1000) % 60); //计算秒数
    return lefth + " 时 " + leftm + " 分 " + lefts + " 秒"; //返回倒计时的字符串
  };
  times.value = setInterval(function () {
    Time.value = showtime();
  }, 1000); //反复执行函数本身
});
</script>
<style scoped lang="less">
.times {
  font-size: 18px;
  color: #f00;
  padding: 0 10px;
}
.payBox {
  width: 1200px;
  margin: 0 auto;
  .paytop {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    .topIcon {
      width: 30px;
      height: 30px;
      padding-top: 6px;
    }
    .topInfo {
      margin-left: 10px;
      flex: 1;
    }
    .topTitle {
      font-size: 14px;
      font-weight: bold;
      height: 40px;
      line-height: 40px;
    }
    .topPrice {
      height: 70px;
      line-height: 100px;
      text-align: end;
      font-size: 14px;
      .priceNum {
        font-size: 18px;
        color: #e1251b;
      }
    }
  }
  .payInfo {
    padding: 10px 20px;
    border: 2px solid #e1251b;
    font-size: 14px;
    .paydes {
      font-weight: bold;
      color: #e1251b;
    }
    .payUl {
      padding: 10px;
      line-height: 24px;
    }
  }
  .center {
    margin: 10px 0;
    border: 1px solid #ccc;
    padding: 40px 10px;
    .payType {
      margin: 20px;
      width: 180px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      .zhifubao {
        background-color: #00a9ee;
        border-radius: 10px;
        width: 40px;
        height: 40px;
      }
      .zhifubaowenzi {
        display: flex;
        flex-direction: column;
        line-height: 20px;
        .text1,
        .text2 {
          font-size: 20px;
          font-weight: bold;
          margin-left: 10px;
        }
        .text2 {
          font-size: 12px;
          letter-spacing: 3px;
          line-height: 14px;
        }
      }
    }
  }
  .paybox {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    .paybtn {
      padding: 6px 20px;
      margin: 40px 0;
      min-width: 180px;
      height: 60px;
      background-color: #e1251b;
      border: none;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }
  }
}
.payModelBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
.payImgs {
  display: block;
  height: 300px;
  width: 300px;
}
.payBtnOut,
.payBtnOver {
  padding: 6px 20px;
  margin: 0 10px;
  min-width: 150px;
  height: 50px;
  border: none;
  background-color: #a092fa;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border-radius: 10px;
}
.payBtnOut {
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
}
</style>
